<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <searchForm
          @getNewTableData="getNewTableData"
          :question="choice"
          @fn="search"
        />
        <el-alert
          style="margin-top: 10px"
          :title="'数据一共' + counts + '条'"
          type="info"
          show-icon
          :closable="false"
        />
        <!-- 试题表格 -->
        <el-table :data="tableData" style="width: 100%; margin-top: 20px">
          <el-table-column prop="number" label="试题编号" width="300" />
          <el-table-column prop="subject" label="学科" width="120" />
          <el-table-column prop="catalog" label="目录" width="120" />
          <el-table-column
            prop="questionType"
            label="题型"
            width="120"
            :formatter="formatterQuestionType"
          />
          <el-table-column prop="question" label="题干" width="300">
            <template slot-scope="scope">
              <p v-html="scope.row.question"></p>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="300">
            <template slot-scope="scope">
              {{ formatTime(scope.row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="difficulty"
            label="难度"
            width="200"
            :formatter="formatterDifficulty"
          />
          <el-table-column prop="creator" label="录入人" width="120" />
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="{ row }">
              <!-- 预览 -->
              <HintButton
                type="primary"
                icon="el-icon-view"
                circle
                plain
                title="预览"
                @click.native="preview(row)"
              />
              <!-- 修改 -->
              <HintButton
                type="success"
                icon="el-icon-edit"
                circle
                plain
                title="修改"
                @click.native="editBasicsQuertion(row)"
              />
              <!-- 删除 -->
              <HintButton
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                title="删除"
                @click.native="delQuestion(row)"
              />
              <!-- 加入精选 -->
              <HintButton
                type="warning"
                icon="el-icon-check"
                circle
                plain
                title="加入精选"
                @click.native="addChioce(row)"
              />
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
        >
        </el-pagination>
      </el-card>
      <!-- 查看弹窗 -->
      <PreviewDialog
        :showDialog.sync="showDialog"
        :QuestionDetail="QuestionDetail"
      />
    </div>
  </div>
</template>

<script>
import searchForm from '@/components/searchForm' // 查询
import HintButton from '@/module-hmmm/pages/questuons/button.vue' // 封装的按钮
import {
  list as getQuestionListApi, // 获取基础题库列表
  detail as getQuestionDetailApi, // 获取基础题详情
  remove as removeQuestionApi, // 删除
  choiceAdd // 加入或取消精选
} from '@/api/hmmm/questions'
import PreviewDialog from '@/components/PreviewDialog'
import dayjs from 'dayjs'
// 枚举文件
import {
  questionType, // 题型
  difficulty // 难度
} from '@/api/hmmm/constants'
export default {
  components: {
    searchForm,
    HintButton,
    PreviewDialog
  },
  data () {
    return {
      choice: false, // 传给搜索组件
      tableData: [], // 基础题库列表
      pagesize: null, // 总页码数
      counts: null, // 总条数
      pages: null, // 总页数
      page: 1, // 当前页
      pagesize: 10, // 每页多少条数据
      showDialog: false, // 控制弹窗显示和隐藏
      QuestionDetail: {}, // 基础数据详情
      formDataAll: {} // 搜索组件的搜索参数
    }
  },
  created () {
    this.getQuestionList()
  },
  methods: {
    //接受搜索组件传过来的搜索参数
    search(val) {
      this.formDataAll = val;
    },
    // 加入精选题库
    addChioce(row) {
      row.choiceState = 1;
      this.$confirm("此操作将该题目加入精选，是否继续", "提示", {
        type: "info",
      })
        .then(async () => {
          await choiceAdd(row);
          this.$message.success("加入成功");
          this.getQuestionList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消加入精选",
          });
        });
    },
    // 删除按钮
    delQuestion(row) {
      this.$confirm("此操作将永久删除该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await removeQuestionApi(row);
          this.$message.success("删除成功");
          this.getQuestionList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 查看按钮
    async preview(row) {
      const { data } = await getQuestionDetailApi({ id: row.id });
      this.showDialog = true;
      this.QuestionDetail = data;
    },
    // 修改基础题
    editBasicsQuertion(row) {
      this.$router.push(`/questions/new?id=${row.id}`);
    },
    // 获搜索选后的数据
    getNewTableData(data) {
      console.log(data);
      this.tableData = data.items;
      this.counts = data.counts;
    },
    // 当前页发生改变
    handleCurrentChange(val) {
      this.page = val;
      let obj = { ...this.formDataAll, page: this.page };
      this.getQuestionList(obj);
    },
    // 每页条数
    handleSizeChange(val) {
      this.pagesize = val;
      this.page = 1;
      this.getQuestionList();
    },
    // 处理难度函数
    formatterDifficulty (row, column, cellValue, index) {
      const res = difficulty.find((itme) => itme.value === cellValue)
      if (res === '' || res === undefined) return
      return res.label
    },
    // 处理题型函数
    formatterQuestionType (row, column, cellValue, index) {
      const res = questionType.find((itme) => itme.value === cellValue)
      if (res === '' || res === undefined) return
      return res.label
    },
    // 处理时间函数
    formatTime (data) {
      return dayjs(data).format('YYYY-MM-DD HH:mm:ss')
    },
    // 获取基础题库列表
    async getQuestionList (newdata) {
      const { data } = await getQuestionListApi(newdata)
      this.tableData = data.items
      this.counts = data.counts
    }
  },
  watch: {
    tableData: {
      deep: true, // 每层数据监听，深度监听
      handler () { // handler处理器：当数据变化时，要执行的函数！
        return this.tableData
      }
    }
  }
}
</script>

<style scoped lang="scss">
</style>
